<template>
	<view class="component">
		<u-popup v-model="show" mode="center" :custom-style="customStyle" :border-radius="20">
			<view class="popup">
				<view class="header">
					<view></view>
					<view class="title">兑换{{info.coupon_name}}券</view>
					<u-icon name="close" @click="handler('close')" />
				</view>
				<view class="input">
					<input :placeholder="placeholder" type="number" v-model="number"/>
				</view>
				<view class="confirm" @click="handler('click')">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				customStyle: {
					backgroundColor: 'transparent'
				},
				number: ""
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
				default: ()=>{}
			}
		},
		computed:{
			placeholder(){
				return `请输入兑换数量（限3${this.info.coupon_company}/日）`
			}
		},
		watch: {
			value: {
				handler: function(val) {
					this.show = val
				},
				immediate: true,

			},
			info(val){
				console.log('info==>',val);
			},
			show(val) {
				if (val != this.value) {
					this.$emit("update:value", val)
				}
			}
		},
		methods: {
			handler(event) {
				this.show = false
				this.$emit(event, {num: this.number, ...this.info})
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		width: 710rpx;
		overflow: hidden;

		.header {
			padding: 40rpx;
			background-color: #EEEFF0;
			@extend .flex-btw;
		}

		.input {
			padding: 29rpx;
			background-color: #EEEFF0;
			margin: 50rpx 60rpx;
			border-radius: 20rpx;
		}

		.confirm {
			margin: 0 66rpx 60rpx 66rpx;
			background: linear-gradient(to right, #FFBC67, #FC602B);
			@extend .flex-center;
			padding: 26rpx;
			color: #FFF;
			border-radius: 60rpx;
		}
	}
</style>
